<template>
	<div class="around-max">
		<!-- 头部导航 -->
		<div class="around-header">
			<van-nav-bar :title="list.brandName" left-arrow @click-left="onClickLeft" />
		</div>
		<!-- 主体部分 -->
		<div class="around-main">
			<!-- 轮播 -->
			<div class="around-main-banner">
				<van-swipe @change="onChangeBanner">
					<van-swipe-item v-for="item in list.img" :key="item">
						<img v-lazy="baseUrl + item" />
					</van-swipe-item>

					<template #indicator>
						<div class="custom-indicator">
							<!-- {{ current + 1 }}/{{ list.img.length }} -->
						</div>
					</template>
				</van-swipe>
			</div>
			<!-- 详细信息 -->
			<div class="around-detailed">
				<!-- 价格 -->
				<div class="around-price">
					￥
					<span>
						{{ list.price }}
					</span>
				</div>
				<!-- 名字 -->
				<div class="detailed-name">
					<div>
						<div>
							{{ list.name }}
						</div>
						<div class="detailed-member">
							{{ list.brief }}
						</div>
					</div>
					<div class="detailed-wish">
						<div>{{ list.brandId }} 人</div>
						<div>想买</div>
					</div>
				</div>
				<!-- 排行榜 -->
				<div class="around-list">
					<van-cell :title="list.brandName + '榜No.1'" is-link icon="chart-trending-o" />
				</div>
			</div>
			<!-- 优惠券 -->
			<div class="around-coupon">
				<van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />
				<van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px">
					<van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon"
						:disabled-coupons="disabledCoupons" @change="onChange" @exchange="onExchange" />
				</van-popup>
			</div>
			<!-- 数据 -->
			<div class="around-data">
				<van-cell is-link @click="showcanshu = true">
					<div class="around-data-canshu">参数</div>
					<van-swipe :show-indicators="false" :loop="false" width="100">
						<van-swipe-item v-for="item in list.attrList" :key="item.attrName">
							<div class="around-tabale">
								<span>{{ item.attrName }}</span>
								<span>{{ item.attrValue }}</span>
							</div>
						</van-swipe-item>
					</van-swipe>
				</van-cell>
			</div>
			<!-- ip -->
			<div class="around-ip">
				<van-cell is-link @click="showIp = true">
					<div class="around-ip-name flex-name">
						<div class="around-data-canshu">IP</div>
						<div>哔哩哔哩</div>
					</div>
				</van-cell>
			</div>
			<!-- 品牌 -->
			<div class="around-brand">
				<van-cell is-link @click="showBrand = true">
					<div class="around-brand-name flex-name">
						<div class="around-data-canshu">品牌</div>
						<div>{{ list.brandName }}</div>
					</div>
				</van-cell>
			</div>
			<!--  正品保障 -->
			<div class="around-quality">
				<van-cell is-link @click="showQuality = true">
					<div class="around-quality-one">
						<span>放心购，正品保障</span>
						<span>专业包装</span>
						<span>满129包邮</span>
					</div>
					<div class="around-quality-tow">
						<span>支持7天无理由(拆封后不支持)</span>
					</div>
				</van-cell>
			</div>
			<!-- 相关推荐 -->
			<div class="around-relevant">
				<p>相关推荐</p>
				<van-swipe :show-indicators="false" :loop="false" width="100">
					<van-swipe-item v-for="item in relevantList" :key="item.itemsId">
						<div class="box">
							<img v-lazy="baseUrl + item.itemsImg" />
							<span class="t">{{ item.name }}</span>
							<span class="p">￥{{ item.price }}</span>
						</div>
					</van-swipe-item>
				</van-swipe>
			</div>
			<div class="imgBotton">
				<img v-lazy="item" alt="" v-for="item in this.imgOne" :key="item" />
			</div>
		</div>
		<!--  弹出参数框 -->
		<van-action-sheet v-model="showcanshu">
			<table border="1px" cellspacing="" cellpadding="">
				<tr v-for="item in list.attrList" :key="item.attrName">
					<td class="td-right">{{ item.attrName }}</td>
					<td>{{ item.attrValue }}</td>
				</tr>
			</table>
		</van-action-sheet>
		<!--  弹出IP -->
		<van-action-sheet v-model="showIp">
			<div>
				<p>
					哔哩哔哩
					，英文名称：bilibili，简称B站，现为中国年轻世代高度聚集的文化社区和视频平台，
					该网站于2009年6月26日创建，被粉丝们亲切地称为“B站”。
					2018年3月28日，哔哩哔哩在美国纳斯达克上市。
					2021年3月29日，哔哩哔哩正式在香港二次上市。
					B站早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站。
					经过十年多的发展，围绕用户、创作者和内容，构建了一个源源不断产生优质内容的生态系统，
					B站已经涵盖7000多个兴趣圈层的多元文化社区，曾获得QuestMobile研究院评选的“Z世代偏爱APP”
					和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强。
					2022年2月，bilibili直播将上线开播前人脸认证功能，
					确保开播人与实名认证者一致，后续逐步在各个分区开放。
					3月，哔哩哔哩公布2021年第四季度和财年财务业绩2021财
					年财务业绩总净收入为194亿元人民币，较2020年增长62%。
				</p>
			</div>
		</van-action-sheet>
		<!--  弹出品牌 -->
		<van-action-sheet v-model="showBrand">
			<div>
				<p>{{ list.brandName }}...</p>
			</div>
		</van-action-sheet>
		<!--  弹出正品 -->
		<van-action-sheet v-model="showQuality">
			<div class="quality-font">
				<h3>关于运费</h3>
				单笔订单中合并发货的商品实付总金额(含定金+尾款)满足包邮门槛即可包邮，定金预售商品的运费将在补款发货时产生。具体物流规则以商品页面展示为准。
				<h3>7天无理由</h3>
				会员购承诺提供7天无理由退换货服务(特殊商品及类目除外)，自商品被签收之日起计算，在保证商品完好且不影响二次销售的前提下，会员购支持7天无理由退换货。
				手办模玩类商品均不支持7天无理由退换货(手办为手工制品，难免会有瑕疵点，敬请谅解)。
			</div>
		</van-action-sheet>
		<!-- 底部订票按钮 -->
		<div>
			<van-goods-action>
				<van-goods-action-button type="danger" text="加入购物车" @click="onClickButton(list.shopId)" />
			</van-goods-action>
		</div>
	</div>
</template>

<script>
	import { detailsAroundApi, relevantApi } from "../../apis/details";
	import { getProductInfo } from "../../apis/indexApi";
	const coupon = {
		available: 1,
		condition: "无使用门槛\n最多优惠12元",
		reason: "",
		value: 10,
		name: "体验优惠的感觉",
		startAt: 1489104000,
		endAt: Date.now() + 1489104000,
		valueDesc: "0.1",
		unitDesc: "元",
	};
	const coupondisabled = {
		available: 1,
		condition: "无使用门槛\n最多优惠一亿元",
		reason: "",
		value: 150,
		name: "万元优惠",
		startAt: 1489104000,
		endAt: 1514592000,
		valueDesc: "10000",
		unitDesc: "元",
	};
	export default {
		data() {
			return {
				id: 10073520,
				list: {},
				relevantList: {},
				current: 0,
				showcanshu: false,
				chosenCoupon: -1,
				coupons: [coupon],
				disabledCoupons: [coupondisabled],
				showList: false,
				showIp: false,
				showBrand: false,
				showQuality: false,
				// 展示第一张图片
				imgOne: {},
				baseUrl: 'http://127.0.0.1:15666',
				product: []
			};
		},
		created() {},
		mounted() {
			let newId = this.$route.params.id;
			this.product = this.$route.params.item
			if (newId) {
				this.id = newId;
			}
			detailsAroundApi(this.id).then((d) => {
				this.list = d.data;
				this.imgOne = this.list.mobileDesc.map((d) => {
					return "http://localhost:15666" + d;
				});
			});
			relevantApi({
				page: 1,
				size: 10,
				ipRightName: "",
				name: this.list.brandName,
			}).then((d) => {
				this.relevantList = d.data.rows.map((it) => {
					return it;
				});
			});
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1);
			},

			onClickButton() {
				// console.log(1223123);
				let data = {
					userId: this.$store.getters['common/user'].id,
					price: this.product.price,
					id: this.product.id,
					time: new Date(),
					count: 1,
					name: this.product.name,
					detailaddress: '无',
					bgUrl: this.product.imgUrl
				}
				getProductInfo(data).then(resolve => {
					if (resolve.code === 200) {
						this.$toast('加入购物车成功');
					} else {
						this.$toast('加入购物车失败');
					}
				})
			},


			onChangeBanner(index) {
				this.current = index;
			},
			onChange(index) {
				this.showList = false;
				this.chosenCoupon = index;
			},
			onExchange(code) {
				this.coupons.push(coupon);
			},
		},
	};
</script>
<style lang="less" scoped>
	.custom-indicator {
		position: absolute;
		right: 5px;
		bottom: 5px;
		padding: 2px 5px;
		font-size: 12px;
		background: rgba(0, 0, 0, 0.1);
	}

	.around-max {
		height: 100%;

		.around-header {
			height: 50px;
		}

		.around-main {
			background: rgb(225, 225, 225);
			height: calc(100% - 50px - 50px);
			overflow-x: hidden;

			.around-main-banner {
				width: 100%;
				height: 50%;
				background: white;

				>div {
					height: 100%;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.around-detailed {
				padding: 10px;
				font-size: 17px;
				background: white;

				.around-price {
					color: red;

					span {
						font-size: 25px;
					}
				}

				.detailed-name {
					display: flex;
					padding-bottom: 10px;
					border-bottom: 1px solid gray;

					:nth-child(1) {
						width: 75%;

						:nth-child(1) {
							width: 100%;
						}
					}

					.detailed-member {
						font-size: 15px;
						color: gray;
					}

					.detailed-wish {
						margin: 0;
						flex: 1;
						text-align: center;

						>div {
							width: 100%;
						}
					}
				}

				.around-list {
					margin-top: 10px;

					.van-cell {
						padding: 0;

						.van-icon {
							color: red;
						}

						.van-cell__title {
							font-weight: 900;
						}
					}
				}
			}

			.around-coupon {
				margin-top: 10px;
				width: 100%;
				margin-bottom: 10px;
			}

			.around-data {
				width: 100%;

				.van-cell {
					width: 100%;
					height: 20%;

					.van-cell__value {
						display: flex;
					}

					.around-data-canshu {
						text-align: center;
						line-height: 45px;
						width: 10%;
						flex-shrink: 0;
					}
				}

				.around-tabale {
					text-align: center;
					width: 100px;
					flex-shrink: 0;

					span {
						display: block;
					}

					:nth-child(1) {
						font-size: 10px;
						color: gray;
					}

					:nth-child(2) {
						font-size: 16px;
						color: black;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.van-icon {
					text-align: center;
					line-height: 45px;
				}
			}

			.flex-name {
				display: flex;

				.around-data-canshu {
					width: 50px;
					flex-shrink: 0;
				}

				:nth-child(2) {
					flex: 1;
				}
			}

			.around-brand .van-cell {
				border-bottom: 1px solid black;
			}

			.around-quality {
				.around-quality-one {
					display: flex;
					justify-content: space-between;

					:nth-child(1) {
						font-size: 16px;
						font-weight: 900;
					}
				}
			}

			.around-relevant {
				margin-top: 10px;
				padding: 10px;
				background: white;

				p {
					font-size: 16px;
					font-weight: 900;
					padding: 0;
					margin: 0;
				}

				.box {
					height: 100%;
					padding: 5px;

					img {
						width: 100%;
						height: 100px;
					}

					.t {
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.p,
					.t {
						display: block;
						text-align: center;
					}
				}
			}

			.imgBotton {
				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.van-action-sheet__content {
			min-height: 600px;

			table {
				width: 100%;
				font-size: 0.9375rem;
				border-collapse: collapse;

				.td-right {
					border-right: 1px solid black;
				}

				.information-text {
					width: 4rem;
				}

				tr,
				td {
					border: 1px solid white;
					border-bottom: 1px solid black;
				}

				tr {
					height: 50px;
				}

				td {
					padding: 10px;
				}
			}
		}

		.quality-font {
			font-size: 16px;

			h3 {
				color: red;
			}
		}
	}
</style>
